<template>
  <div class="info">
    <div class="item">
      <div class="title">基本信息</div>
      <div class="textBox">
        <div class="label">商户ID</div>
        <div class="val">{{ memberNo }}</div>
      </div>
      <div class="textBox">
        <div class="label">企业类型</div>
        <div class="val">{{ info.memberTypeName }}</div>
      </div>
      <div class="textBox">
        <div class="label">企业名称</div>
        <div class="val">{{ info.memberName }}</div>
      </div>
      <div class="textBox">
        <div class="label">企业简称</div>
        <div class="val">{{ info.memberShortName }}</div>
      </div>
      <div class="textBox">
        <div class="label">经营范围</div>
        <div class="val">
          {{ info.businessScope }}
        </div>
      </div>
      <div class="textBox">
        <div class="label">所在地</div>
        <div class="val">
          {{ info.provName }} {{ info.areaName }}
        </div>
      </div>
      <div class="textBox">
        <div class="label">注册地址</div>
        <div class="val">{{ info.registerAddress }}</div>
      </div>
      <div class="textBox">
        <div class="label">联系地址</div>
        <div class="val">{{ info.address }}</div>
      </div>
      <div class="textBox">
        <div class="label">营业执照编码</div>
        <div class="val">{{ info.businessCode }}</div>
      </div>
      <div class="textBox">
        <div class="label">有效日期</div>
        <div class="val">
          {{ info.businessStartDate }} - {{ info.businessExpires }}
        </div>
      </div>
      <div class="textBox">
        <div class="label">营业执照</div>
        <div class="img">
          <img :src="businessLicensePhoto" alt="" class="imgs_" />
        </div>
      </div>
      <div class="textBox">
        <div class="label">银行开户许可证</div>
        <div class="img">
          <img :src="openAccountPhoto" alt="" class="imgs_" />
        </div>
      </div>
    </div>
    <div class="item">
      <div class="title">法人及联系人信息</div>
      <div class="textBox">
        <div class="label">法人姓名</div>
        <div class="val">{{ info.legalPerson }}</div>
      </div>
      <div class="textBox">
        <div class="label">法人电话</div>
        <div class="val">{{ info.legalTel }}</div>
      </div>
      <div class="textBox">
        <div class="label">法人证件</div>
        <div class="img">
          <img :src="cardPhotoNegative" alt="" class="imgs_" />
        </div>
        <div class="img marginL">
          <img :src="cardPhotoPositive" alt="" class="imgs_" />
        </div>
      </div>
      <div class="textBox">
        <div class="label">联系人姓名</div>
        <div class="val">{{ info.memberContact }}</div>
      </div>
      <div class="textBox">
        <div class="label">联系人电话</div>
        <div class="val">{{ info.memberContactTel }}</div>
      </div>
      <div class="textBox">
        <div class="label">联系人邮箱</div>
        <div class="val">{{ info.contactEmail }}</div>
      </div>
      <div class="textBox hint">
        <i class="el-icon-warning"></i>
        <div>
          您是贵企业系统管理员（支付负责人），当前展示的支付负责人信息与您的个人信息不一致，请立即至
          【个人面板】-【个人信息】 中更新。
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getUserInfo } from "@/utils/public";

export default {
  name: "companyInfo",
  data() {
    return {
      info: {},
      businessLicensePhoto: "",
      openAccountPhoto:"",
      cardPhotoNegative: "",
      cardPhotoPositive: "",
      memberNo: "", //用户ID
    };
  },
  created() {
    //console.log(getUserInfo());
    this.$http.get("/api/merchant/memberinfo/get").then((res) => {
      this.info = res.data;
      // if (this.ruleForm.businessLicensePhoto) {
      this.getImgInfo(this.info.businessLicensePhoto, "businessLicensePhoto");
      // }
      this.getImgInfo(this.info.openAccountPhoto, "openAccountPhoto");

      // if (this.ruleForm.cardPhotoNegative) {
      this.getImgInfo(this.info.cardPhotoNegative, "cardPhotoNegative");
      // }
      // if (this.ruleForm.cardPhotoPositive) {
      this.getImgInfo(this.info.cardPhotoPositive, "cardPhotoPositive");
      // }

      this.memberNo = getUserInfo().memberNo;
    });
  },
  methods: {
    getImgInfo(id, prop) {
      // this.$http.get(`/oss/get?id=${id}`).then(() => {
      this[prop] = window.location.origin + `/merchantApi/oss/view?id=${id}`;
      //console.log(this[prop]);
      // })
    },
  },
};
</script>

<style lang="scss" scoped>
.info {
  display: flex;
  background: #fff;
  // height: calc(100vh - 160px);
  min-width: 1200px;
  padding: 0 0 40px 0px;
  .item {
    padding: 34px 0 0 34px;
    flex: 1;
    .title {
      color: #4f595f;
      position: relative;
      font-size: 20px;
      font-weight: 600;
      line-height: 34px;
      margin-bottom: 34px;
      &::before {
        content: "";
        width: 4px;
        height: 24px;
        background: #03bfc6;
        position: absolute;
        left: -34px;
        top: 5px;
      }
    }
    .textBox {
      display: flex;
      min-height: 32px;
      margin: 14px 0;
      line-height: 32px;
      .label {
        color: #869daa;
        margin-right: 30px;
        text-align: right;
        width: 100px;
      }
      .val {
        width: 80%;
        color: #4f595f;
        font-weight: 500;
      }
      .img {
        width: 244px;
        // height: 244px;
        // background: #869DAA;
        border-radius: 14px;
        overflow: hidden;
        .imgs_ {
          width: 100%;
          height: 100%;
        }
      }
      .marginL {
        margin-left: 30px;
      }
    }
    .hint {
      color: #fc8f90;
      background: #fff9f9;
      border-radius: 6px;
      border: 1px solid #f7d8d8;
      padding: 8px 30px;
      .el-icon-warning {
        font-size: 18px;
        margin-top: 6px;
        margin-right: 20px;
      }
    }
  }
}
</style>
